<template>
	<div id="app" >
	 
     <div class="over-hid bg-qian">
       <div class="bg-xingzhuang"></div>
        <div class="w560 m-center">
            <div class="fill-info-award mt40">
                <div class="left fl">
                    <img src="../../../assets/images/tmp/car.png" alt="">
                </div>
                <div class="right fr">
                    <div class="text">
                        <p class="p1">恭喜您摇到</p>
                        <p class="p2 mt20">起亚两千元代金券两千元代金券两</p>
                    </div>
                </div>
                <div class="left-bar"></div>
                 <div class="white-bottom-dotted"></div>
            </div>
            <h2 class="fill_info_h2">请填写领取人信息</h2>
        <!-- 姓名电话表单 -->
        <!--<form id="J_SuccessForm" class="g-success-form pb200" action="" method="post" :class="{hide:hasAddress}">
            <label class="label mb40 zfix">
                <span class="label-text">姓名</span>
                <input id="username" class="username" name="username" type="text">
                
            </label>
            <label class="label mb40 zfix">
                <span class="label-text">手机</span>
                <input id="phone" class="phone" name="phone" type="text">
            </label>
            <a href="javascript:;" class="btn fr subBtn" id="submitBtn">立即领取</a>
        </form>-->
        <!-- 姓名电话+地址表单 -->
        <form id="J_SuccessForm" class="g-success-form pb90 " action="" method="post" :class="{hide:noAddress}">
            <label class="label mb40 zfix">
                <span class="label-text">姓名</span>
                <input id="username" class="username zfix1 zline1" name="username" type="text">
            </label>
            <label class="label mb40 zfix">
                <span class="label-text ">电话</span>
                <input id="phone" class="phone zfix1 zline1" name="phone" type="text">
            </label>
            <!-- 可以折行的地址，没有做完 -->
            <label class="label mb40 zfix">
                <span class="label-text-address fl">地址</span>
                <div class="textarea-div zfix1 ">
                     <textarea id="address" class="fii_info_address fl" rows="2" cols="12"></textarea>
                </div>
            </label>
            <!--<label class="label mb20 zfix">
                <span class="label-text ">新添加字段</span>
                <input id="newfi" class="newfi zfix1 zline1" name="newfi" type="text">
            </label>-->

            <a href="javascript:;" class="btn fr subBtn" id="submitBtn">提交信息</a>
        </form>
        </div>

        <div class="submit-success-bottom">
            <div class="w560 m-center">获奖说明：1.奖品以实物为准，图片仅供参考
    2.活动结束后，我们将奖品邮寄到您提供的地
    址，请务必确保地址正确。
            </div>
            <!--<div class="wave"></div>-->
        </div>
     </div>
</div>
</template>

<script>
	import 'assets/js/wii_entry';
	import 'assets/js/common';
//	import 'assets/js/yaoyiyao';
//	import 'assets/js/shake';
	export default{
		data(){
			return{
				hasAddress:true,
				noAddress:false
			}
		},
		mounted() {
	    instructionScroll()
        function instructionScroll(){
            var winH = $(window).height();
            var mainH = $('.over-hid').height();
            var h = winH - mainH;
            $('.submit-success-bottom').css({
                height: h+'px',
                overflowY: 'scroll',
                boxSizing: 'border-box'
            })
        };
        
        //  验证用户提交信息的JS
            var feel = {
            NAMEERROR: "请输入正确的姓名",
            PHONEERROR: "请输入正确的手机号",
            ADDRESSERROR: "请输入正确的地址"
        };
        $('#submitBtn').bind("touchstart", function (event) {
//        $('#submitBtn').bind("click", function (event) {
            $("#J_SuccessForm").submit();
        });
        $("#J_SuccessForm").submit(function () {
            var username = $("#username").val();
            var phone = $("#phone").val();
            var phoneReg = /^1[34578]\d{9}$/;
            var address = $("#address").val();
           
            if (username.length <= 1 || GLOBAL.checkNull(username)) {
                GLOBAL.pop(feel.NAMEERROR);
                return false;
            }
            if (GLOBAL.checkNull(phone) || !phoneReg.test(phone)) {
                GLOBAL.pop(feel.PHONEERROR);
                return false;
            }
            if ($("#address").length > 0) {
                if (address.length <= 1 || GLOBAL.checkNull(address)) {
                    GLOBAL.pop(feel.ADDRESSERROR);
                    return false;
                }
            }
            GLOBAL.showLoading();
            var actId = $("#act_id").val();
            var userAwardId = $("#user_award_id").val();
//          $.ajax({
//              url: '/h5/useraward/submit',
//              type: 'post',
//              dataType: 'json',
//              data: {act_id: actId, user_award_id: userAwardId, username: username, phone: phone, address: address},
//              success: function (data) {
//                  GLOBAL.hideLoading();
//                  if (data.ret == 1) {
//                      GLOBAL.pop(data.msg);
//                  } else {
//                      var realData = data.data;
//                      //跳转到
//                      window.location.href = "/h5/useraward/award?act_id=" + realData.act_id + "&user_award_id=" + realData.id;
//                  }
//              },
//              error: function () {
//                  GLOBAL.hideLoading();
//                  GLOBAL.pop("提交用户信息失败!");
//              }
//          });
//
            return false;
        })


   }
}
</script>

<style lang="less">
	@import "../../../assets/css/main.css";
	
</style>